<template>
  <div class="information">
    <div
      class="underline"
      style="width:120px;"
    >
      <span class="title1 color1 zIndex fontBold">发票信息</span>
    </div>
    <div class="order">
      <div class="orderBox">
        <div class="orderInfo">
          <div class="orderInfoBox">
            <p
              class="line25 title"
              v-if="data.status == 1"
            >
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#FF7A1F"
                type="primary"
              >
                未开发票
              </van-tag>
              <span class="content3 fontBold color3">{{ data.title }}</span>
            </p>
            <p
              class="line25 title"
              v-if="data.status == 2"
            >
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#2A90EF"
                type="primary"
              >
                待开发票
              </van-tag>
              <span class="content3 fontBold color3">{{ data.title }}</span>
            </p>
            <p
              class="line25 title"
              v-if="data.status == 3"
            >
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#85898C"
                type="primary"
              >
                已开票
              </van-tag>
              <span class="content3 fontBold color3">{{ data.title }}</span>
            </p>
            <p class="moeny flex align_center justify_between">
              <span class="content2 font400 color6">{{ data.create_time }}</span>
              <span class="content3 font400 color1">￥{{ data.price }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="Membership">
      <div class="MembershipBox">
        <div class="MembershipBoxHeader flex justify_between align_center">
          <p class="font400 content3 color3">
            发票详情
          </p>
        </div>
        <div class="MembershipInfo">
          <p>
            <span class="font400 content3 color2">开票名称:</span>
            <span class="font400 content3 color6">{{ data.billing_name }}</span>
          </p>
          <p>
            <span class="font400 content3 color2">税号:</span>
            <span class="font400 content3 color6">{{ data.tax }}</span>
          </p>
          <!-- <p>
            <span class="font400 content3 color2">地址:</span>
            <span class="font400 content3 color6">{{ data.billing_address }}</span>
          </p> -->
          <!-- <p>
            <span class="font400 content3 color2">开户行:</span>
            <span class="font400 content3 color6 line20">{{ data.bank }}</span>
          </p> -->
          <!-- <p>
            <span class="font400 content3 color2">开户账号:</span>
            <span class="font400 content3 color6 line20">{{ data.bank_account }}</span>
          </p> -->
          <p>
            <span class="font400 content3 color2">开票类型:</span>
            <!-- 1.增值税专用发票、2.增值税点击发票 -->
            <span class="font400 content3 color6 line20"> {{ data.billing_type == 1 ? '数电专票' : '数电普票' }}
            </span>
          </p>
          <p>
            <span class="font400 content3 color2">接收手机号:</span>
            <span class="font400 content3 color6 line20"> {{ data.receive_phone }}
            </span>
          </p>
          <p v-if="data.billing_type === 2">
            <span class="font400 content3 color2">接收邮箱:</span>
            <span class="font400 content3 color6 line20">{{ data.email }}</span>
          </p>
          <!-- <p v-if="data.billing_type === 1">
            <span class="font400 content3 color2">邮寄地址:</span>
            <span class="font400 content3 color6 line20">{{ data.mailing_address }}</span>
          </p> -->
          <p v-if="data.billing_type == 2">
            <span class="font400 content3 color2">电子发票:</span>
            <!-- 1.增值税专用发票、2.增值税电子发票 -->
            <span class="font400 content3 color2 line20 text_underline" @click="handleOpenFile"> 查看
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="Membership">
      <div class="MembershipBox">
        <div class="MembershipBoxHeader flex justify_between align_center">
          <p class="font400 content3 color3">
            快递信息
          </p>
        </div>
        <div class="MembershipInfo">
          <p>
            <span class="font400 content3 color2">快递公司:</span>
            <span class="font400 content3 color6">{{ data.logistics_company }}</span>
          </p>
        </div>
        <div class="MembershipInfo">
          <p>
            <span class="font400 content3 color2">单号:</span>
            <span class="font400 content3 color6">{{ data.logistics }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="flex align_center">
        <div
          @click="back"
          class="agree font400 content3 color4"
        >
          返回
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { publishInfo } from '@/api'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data: any = ref([])

const getInfo = async () => {
  data.value = await publishInfo({ publish_id: route.query.id })
}
getInfo()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const handleOpenFile = () => {
  console.log('data.value?.publishCallback?.pdfUrl', data.value?.publishCallback.pdfUrl)
  window.location.href = data.value?.publishCallback.pdfUrl
}

</script>

<style lang="less" scoped>
.information {
    padding: 0 30px 80px;
    margin-top: 40px;
    .order {
        width: 314px;
        margin: 20px auto 0;
        .orderBox {
            .orderInfo {
                background: #ffffff;
                border-radius: 5px;
                .orderInfoBox {
                    padding: 15px;
                    .title {
                    }
                    .tagleft {
                        margin-right: 5px;
                    }
                    .moeny {
                        margin-top: 10px;
                    }
                }
            }
        }
        .confin {
            border-top: 1px solid #cacaca;
            .confinItem {
                width: 50%;
                text-align: center;
                height: 48px;
                line-height: 48px;
                border-right: 1px solid #cacaca;
            }
            .confinItemW {
                width: 100%;
            }
            .confinItem:last-child {
                border-right: 0;
            }
        }
    }
}

.Membership {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    margin-top:15px;
    .MembershipBox {
        padding: 15px;
    }
    .MembershipContent {
        margin-top: 20px;
        margin-bottom: 26px;
        p {
            line-height: 20px;
        }
        p:last-child {
            margin-top: 20px;
        }
    }
    .MembershipInfo {
        margin:20px 0 0;
        p {
            margin-bottom:10px;
            span:last-child {
                margin-left: 5px;
            }
        }
        p:last-child{
            margin-bottom:0;
        }
    }
    .copy {
        width: 82px;
        height: 30px;
        background: #12142e;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 315px;
            height: 44px;
            background: #85898c;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}
@media (min-width: 750px) {
  .information {
    padding: 0 30px 80px;
    margin-top: 40px;
    .order {
        width: 314px;
        margin: 20px auto 0;
        .orderBox {
            .orderInfo {
                background: #ffffff;
                border-radius: 5px;
                .orderInfoBox {
                    padding: 15px;
                    .title {
                    }
                    .tagleft {
                        margin-right: 5px;
                    }
                    .moeny {
                        margin-top: 10px;
                    }
                }
            }
        }
        .confin {
            border-top: 1px solid #cacaca;
            .confinItem {
                width: 50%;
                text-align: center;
                height: 48px;
                line-height: 48px;
                border-right: 1px solid #cacaca;
            }
            .confinItemW {
                width: 100%;
            }
            .confinItem:last-child {
                border-right: 0;
            }
        }
    }
}

.Membership {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    margin-top:15px;
    .MembershipBox {
        padding: 15px;
    }
    .MembershipContent {
        margin-top: 20px;
        margin-bottom: 26px;
        p {
            line-height: 20px;
        }
        p:last-child {
            margin-top: 20px;
        }
    }
    .MembershipInfo {
        margin:20px 0 0;
        p {
            margin-bottom:10px;
            span:last-child {
                margin-left: 5px;
            }
        }
        p:last-child{
            margin-bottom:0;
        }
    }
    .copy {
        width: 82px;
        height: 30px;
        background: #12142e;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 315px;
            height: 44px;
            background: #85898c;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}
}

</style>
